<template>
  <div>
    <vxe-form :data="formData" :rules="formRules" title-align="right" title-width="100" @submit="submitEvent">
      <vxe-form-item
        title="资源名称"
        field="name"
        span="12"
        :item-render="{name: '$input', props: {placeholder: '请输入资源名称',disabled:disabledSubmit,clearable:true}}"></vxe-form-item>
      <vxe-form-item field="type" align="center" span="12">
        <template #default="{ data }">
          <vxe-radio-group v-model="formData.type" :disabled="disabledSubmit">
            <vxe-radio-button
              v-for="(item, index) in permissionType"
              :key="index"
              :label="item.label"
              :content="item.content"></vxe-radio-button>
          </vxe-radio-group>
        </template>
      </vxe-form-item>
      <vxe-form-item
        v-if="formData.type === 1 || formData.type === 2"
        title="父级"
        key="parentId"
        field="parentId"
        span="24"
        :item-render="{}">
        <template #default="{data}">
          <PullDownTable ref="pdt" v-model="formData.parentId" :disabled="disabledSubmit"></PullDownTable>
        </template>
      </vxe-form-item>
      <vxe-form-item
        title="权限编码"
        field="code"
        span="12"
        :item-render="{name: '$input', props: {placeholder: '请输入权限编码',disabled:disabledSubmit,clearable:true}}"></vxe-form-item>
      <vxe-form-item
        title="排序"
        field="orderNum"
        span="12"
        :item-render="{name: '$input',props: {type: 'number',placeholder: '请输入数字',disabled:disabledSubmit,clearable:true}}"></vxe-form-item>
      <vxe-form-item
        v-if="formData.type === 0 || formData.type === 1"
        key="show"
        title="是否显示"
        field="show"
        :span="spanSize"
        :item-render="{name: '$switch', props: { disabled: disabledSubmit,
                                                 openLabel: '是',
                                                 openValue: 1,
                                                 closeLabel: '否',
                                                 closeValue: 0}}">

      </vxe-form-item>
      <vxe-form-item
        v-if="formData.type === 1"
        key="isOutsideShow"
        title="是否外部打开"
        field="isOutsideShow"
        span="6"
        :item-render="{name: '$switch', props: {disabled: disabledSubmit,
                                                openLabel: '是',
                                                openValue: 1,
                                                closeLabel: '否',
                                                closeValue: 0}}">

      </vxe-form-item>
      <vxe-form-item
        v-if="formData.type === 0"
        key="icon"
        title="图标"
        field="icon"
        span="12"
        :item-render="{}">
        <template #default="{data}">
          <vxe-input v-model="formData.icon" class="icon-search" placeholder="请选择图标" :disabled="disabledSubmit" @suffix-click="selectIcons">
            <template #suffix>
              <a-icon id="icon" type="setting" />
            </template>
          </vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item
        v-else-if="formData.type === 1"
        key="component"
        title="前端组件"
        field="component"
        span="12"
        :item-render="{name: '$input', props: { placeholder: '请输入前端组件路径',disabled: disabledSubmit,clearable:true}}"></vxe-form-item>
      <vxe-form-item
        v-if="formData.type === 0"
        key="redirect"
        title="目录重定向"
        field="redirect"
        span="24"
        :item-render="{name: '$input', props: { placeholder: '请输入重定向路径',disabled: disabledSubmit,clearable:true}}"></vxe-form-item>
      <vxe-form-item
        v-if="formData.type === 1"
        key="path"
        title="菜单路径"
        field="path"
        span="24"
        :item-render="{name: '$input', props: { placeholder: '请输入菜单路径',disabled: disabledSubmit,clearable:true}}"></vxe-form-item>
      <vxe-form-item
        title="备注"
        field="remark"
        span="24"
        :item-render="{name: '$textarea', props: {placeholder: '请输入备注',disabled: disabledSubmit}}"></vxe-form-item>
      <vxe-form-item align="center" span="24">
        <template #default>
          <vxe-button type="submit" status="primary" :disabled="disabledSubmit">保存</vxe-button>
          <vxe-button type="reset" :disabled="disabledSubmit">重置</vxe-button>
          <!--          <vxe-button @click="$refs.xModal.close()">取消</vxe-button>-->
        </template>
      </vxe-form-item>
    </vxe-form>
    <icons @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></icons>
  </div>
</template>

<script>
import { permissionAdd, permissionEdit } from '@/api/system'
import Icons from '@/views/system/PermissionManagement/modules/icon/Icons'
import PullDownTable from '@/views/system/PermissionManagement/modules/pullDownTable/pullDownTable'

export default {
  name: 'PermissionForm',
  components: { PullDownTable, Icons },
  props: {
    isModal: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      selectTab: 'tab1',
      iconChooseVisible: false,
      spanSize: 12,
      permissionType: [
        { label: 0, content: '目录' },
        { label: 1, content: '菜单' },
        { label: 2, content: '按钮/API' }
      ],
      sexList: [
        { label: '', value: '' },
        { label: '女', value: '0' },
        { label: '男', value: '1' }
      ],
      formData: {},
      formRules: {
        name: [
          { required: true, message: '请输入资源名称' }
        ],
        parentId: [
          { required: true, message: '请输入父级ID' }
        ],
        code: [
          { required: true, message: '请输入权限编码' }
        ],
        orderNum: [
          { required: true, message: '请输入排序' }
        ],
        icon: [
          { required: true, message: '请输入图标' }
        ],
        component: [
          { required: true, message: '请输入' }
        ]
      },
      formItems: [],
      fromButtons: {
        align: 'center',
        span: 24,
        titleAlign: 'left',
        itemRender: {
          name: '$buttons',
          children: [{ props: { disabled: false, type: 'submit', content: '保存', status: 'primary' } }, {
            props: {
              disabled: false,
              type: 'reset',
              content: '重置'
            }
          }]
        }
      },
      disabledSubmit: false
    }
  },
  inject: ['reloadData'],
  watch: {
    'formData.type' (newValue, oldValue) {
      this.selectType(newValue)
      console.log(this.formData)
    }
  },
  methods: {
    // 下拉表格相关
    inputValueChange (val) {
      console.log(val)
      this.formData.parentId = val
    },
    selectType (value) {
      if (value === 0) {
        this.spanSize = 12
      }
      if (value === 1) {
        this.spanSize = 6
      }
    },
    // 图标选择相关
    selectIcons () {
      this.iconChooseVisible = true
    },
    handleIconCancel () {
      this.iconChooseVisible = false
    },
    handleIconChoose (value) {
      console.log(value)
      this.formData.icon = value
      this.iconChooseVisible = false
    },

    /**
     * 当点击新增按钮时调用此方法
     */
    add () {
      this.formData = {
        id: null,
        parentId: null,
        name: null,
        code: null,
        component: null,
        type: 0,
        show: 1,
        redirect: null,
        path: null,
        orderNum: null,
        isOutsideShow: 0,
        remark: ''
      }
    },
    edit (row) {
      this.formData = {
        id: row.id,
        parentId: row.parentId,
        name: row.name,
        code: row.code,
        component: row.component,
        type: row.type,
        show: row.show,
        redirect: row.redirect,
        path: row.path,
        orderNum: row.orderNum,
        isOutsideShow: row.isOutsideShow,
        remark: row.remark
      }
      console.log('edit', this.formData)
    },
    addSub (row) {
      this.formData = {
        id: null,
        parentId: row.id,
        name: null,
        code: null,
        component: null,
        type: 1,
        show: 1,
        redirect: null,
        path: null,
        orderNum: null,
        isOutsideShow: 0,
        remark: ''
      }
      console.log('addSub', this.formData)
    },
    Detail (row) {
      this.formData = {
        id: row.id,
        parentId: row.parentId,
        name: row.name,
        code: row.code,
        component: row.component,
        type: row.type,
        show: row.show,
        redirect: row.redirect,
        path: row.path,
        orderNum: row.orderNum,
        isOutsideShow: row.isOutsideShow,
        remark: row.remark
      }
      console.log('Detail', this.formData)
    },
    PermissionAdd (data) {
      permissionAdd(data).then((res) => {
        const resData = res.data
        if (resData.code === 200) {
          console.log('reloadData', this.formData)
          this.$XModal.message({ content: '新增成功', status: 'success' })
          this.reloadData(this.formData)
        } else if (resData.code >= 400) {
          throw resData
        }
      }).catch((error) => {
        // console.log(error)
        const message = error.response ? error.response.data.message : error.message
        this.$XModal.message({ content: message, status: 'error' })
      }).finally(() => {
        this.$emit('modalControl', { submitLoading: false, showEdit: false })
      })
    },
    PermissionEdit (data) {
      permissionEdit(data).then((res) => {
        const resData = res.data
        if (resData.code === 200) {
          console.log('reloadData', this.formData)
          console.log('selectRow', this.selectRow)
          this.$XModal.message({ content: '编辑成功', status: 'success' })
          this.reloadData(this.formData)
          // Object.assign(this.selectRow, this.formData)
        } else if (resData.code >= 400) {
          throw resData
        }
      }).catch((error) => {
        // console.log(error)
        const message = error.response ? error.response.data.message : error.message
        this.$XModal.message({ content: message, status: 'error' })
      }).finally(() => {
        this.$emit('modalControl', { submitLoading: false, showEdit: false })
      })
    },
    // 提交按钮点击事件
    submitEvent () {
      this.$emit('modalControl', { submitLoading: true })

      if (this.isModal === '新增') {
        this.PermissionAdd(JSON.stringify(this.formData))
      } else if (this.isModal === '编辑') {
        this.PermissionEdit(JSON.stringify(this.formData))
      }
    }
  }
}
</script>

<style lang='less'>
.icon-search.vxe-input {
  .vxe-input--suffix {
    width: auto;
    //height: 32px;
    height: auto;
    top: 1px;
    text-align: center;
    border-left: 1px solid #dcdfe6;
    background-color: #f5f7fa;
    cursor: pointer;

    #icon {
      padding: 9px;
      //margin-right: 8px;
    }
  }

  .vxe-input--inner {
    padding-right: 86px;
    border: 1px solid #dcdfe6;
  }
}
</style>
